<template>
	<div :style="{ height: clienHeight + 'px', width: clienWidth + 'px' }">
		<el-container style="width: 100%;height: 100%;overflow: hidden;">
			<el-header class="headers">
				<div class="log-title">
					<div class="logs" id="logbox">
						<img src="./assets/logo.png" alt="">
						<span class="pcName">认养管理系统</span>
					</div>
					<div class="icons" @click=" isCollapse = !isCollapse">
						<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
					</div>
				</div>
				<weather/> 
				<div class="loginBth">
					<div class="setIcon" v-if="themeChange=='default'"><i class="el-icon-moon" @click="themeDefault('dark')"></i></div>
					<div class="setIcon" v-if="themeChange=='dark'"><i class="el-icon-sunrise-1" @click="themeDefault('default')"></i></div>
					<div class="userinfo"><img :src="userImg?userImg:'./assets/logo.png'" alt=""><span>{{userName}}</span></div>
					<div class="outLogin" @click="loginOut">退出登录</div>
				</div>
			</el-header>
			<el-container class="bottoms">
				<el-aside width="auto">
					<el-menu :default-active="$route.meta.routerpath" router class="el-menu-vertical-demo"
						:collapse="isCollapse" active-text-color="#01B780">
						<el-menu-item v-for="item in menusList" :key="item.path" :index="item.path">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<div class="breadcrumb">
						<el-tag
							v-for="(tag,index) in tagsData"
							:key="tag.path"
							closable
							:style="{color:$route.path==tag.path?'#fff':'#000',backgroundColor:$route.path==tag.path?'#01B780':'#fff'}"
							@close="handleClose(tag,index)"
							@click="$router.push({path:tag.path,query:{...tag.query}})"
							type="info">
							{{tag.title}}
						</el-tag>
					</div>
					<div class="view">
						<transition name="fade-transform" mode="out-in">
								<router-view :key="key" />
						</transition>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
import { setTheme } from "./theme/theme"; // 引入切换主题方法
import weather from './components/weather/index.vue'
export default {
	components:{weather},
	data() {
		return {
			clienHeight: 0,
			clienWidth: 0,
			menusList: [],
			isCollapse: false,
			userImg:sessionStorage.getItem('headImgUrl'),
            userName:sessionStorage.getItem('name'),
			themeChange:localStorage.getItem("theme")||'default',
			tagsData: [],
		}
	},
	computed: {
    cachedViews() {
      return this.$route.meta.alive
    },
    key() {
      return this.$route.path
    }
    },
	mounted() {
		this.clienHeight = window.innerHeight
		this.clienWidth = window.innerWidth
		this.themeDefault(this.themeChange); // 进入页面默认渲染默认主题方案
		this.getuserMenus();
	},
	methods: {
		//设置主题
		themeDefault(type) {
			    this.themeChange=type
				if(type=='dark'){
                    document.documentElement.setAttribute('theme-mode', 'dark'); // 重置为深色模式
				}else{
					// 默认主题方案（白底黑字）
					document.documentElement.removeAttribute('theme-mode'); // 重置为浅色模式
				}
				setTheme(type);
		},
		//获取菜单
		getuserMenus() {
			let myList = JSON.parse(window.sessionStorage.getItem('routes'))
			myList.forEach(v => {
				if (v.isShow) {
					let item = {
						name: v.title,
						path: v.path,
						icon: v.icon
					}
					this.menusList.push(item)
				}
			})
			this.tagsData=[{
				title:this.menusList[0].name,
				path:this.menusList[0].path
			}]
			if(this.menusList[0].path!=this.$route.path){
				this.tagsData.push({
				title:this.$route.meta.title,
				path:this.$route.path
			   })
			}
			
		},
		//移出标签
		handleClose(tag,index) {
			if(this.tagsData.length==1)return this.$notify({
							title: '提示',
							message: '不可删除',
							type: 'error',
							duration: 1000
						});
			if(tag.path==this.$route.path){
				    if(index==this.tagsData.length-1){
					this.$router.push({path:this.tagsData[index-1].path,query:{...this.tagsData[index-1].query}})  
				   }else{
                    this.$router.push({path:this.tagsData[index+1].path,query:{...this.tagsData[index+1].query}})    
				   }
			}
			this.tagsData.splice(index, 1);
        },
		// 退出
		loginOut() {
			this.$confirm("将要退出登录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.$message({
						type: "success",
						message: "退出成功!",
					});
					sessionStorage.clear()
					this.$router.push({ path: '/' })
					location.reload();
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "取消退出",
					});
				});
		},
	},
	watch: {
		$route: {
			handler(newValue){
				const bool = this.tagsData.find((item)=>newValue.meta.title == item.title)
				if(!bool){
					this.tagsData.push({
						query:newValue.query||{},
						title:newValue.meta.title,
						path:newValue.path,
					})
				} 
			},
			tagsData:{
				immediate:true,
				handler(newVal){
					return;
				}
			}
		}
	},
}
</script>
<style lang="less" scoped>
@import './theme/style.less'; // 引入主题样式文件
.view::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}
/deep/.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 250px;
	text-align: left;
	height: 100%;
}

/deep/.el-menu-item.is-active {
	border-right: 4px solid #01B780 ;
	box-sizing: border-box ;
}
/deep/.el-menu-item i{
	color: rgba(@resultTextColor);
}
/deep/.el-menu{
	border-right:none;
}
/deep/.el-menu-item{
	color: rgba(@resultTextColor);
 }
.bottoms {
	width: 100%;
	height: calc(100% - 60px);
    .el-main {
	height: 100%;
	box-sizing: border-box;
	padding: 20px !important;
	background: rgba(@pageBgColor);
	.breadcrumb {
		width: 100%;
		display: flex;
		gap: 5px;
		padding:0px 20px;
		padding-bottom: 10px;
		/deep/.el-tag.el-tag--info{
			color: #000;
			font-size: 14px;
			cursor: pointer;
		}
		/deep/.el-tag--small{
              height: 30px;
			  line-height: 28px;
		}
	}
	.view {
		height: calc(100% - 40px);
		overflow-y: auto;
		padding: 0 20px;
	}
}
}
.headers {
	height: 60px !important;
	background-color: rgba(@resultBgColor);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: rgba(@resultTextColor);
	.log-title {
		display: flex;
		align-items: center;

		.logs {
			width: 250px;
			height: 100%;
			display: flex;
			align-items: center;
			gap: 10px;
			padding-left: 20px;

			img {
				width: 40px;
				height: 40px;
				
			}

			.pcName {
				font-weight: 600;
				line-height: 24px;
				letter-spacing: 1px;
				font-size: 24px;

			}
		}

		.icons {
			font-size: 32px;
			cursor: pointer;
		}
	}

	.loginBth {
		display: flex;
		align-items: center;
		gap: 30px;
		font-weight: 500;
		font-size: 16px;
		.setIcon {
			background: rgba(@resultIconColor);
			border-radius: 8px;
			width: 32px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			cursor: pointer;
			color:rgba(@resultBgColor);
		}

		.userinfo {
			display: flex;
			align-items: center;
			font-weight: 600;

			img {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 5px;
			}
		}

		.outLogin {
			cursor: pointer;
			font-weight: 600;
		}
	}
}

.el-aside {
	height: 100%;
	background-color: rgba(@resultBgColor);
}
.el-menu-vertical-demo{
	background-color: rgba(@resultBgColor);
	
 }

</style>
<style lang="scss" scoped>
</style>